<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../css/index.css">
</head>

<body>
	<div id="wrap">
		<div class="bodytop" id="bodytop">
			<div class="bodyone">
				<!-- <div class="bodySpan">充电</div> -->
				<button type="button" id="five" class="btn2 btn4">1.低温充电加热</button>
			</div>
			<div class="bodytwo">
				<button type="button" id="three" class="btn btn3">2.慢充</button>
				<button type="button" id="four" class="btn">3.快充</button>
			</div>
			<div class="bodytwo">
				<!-- <div class="bodySpan">放电</div> -->
				<button type="button" id="six" class="btn btn3">4.四驱</button>
				<!-- <button type="button" id="seven" class="btn">前驱</button>-->
				<button type="button" id="eight" class="btn">5.后驱</button>
			</div>
			<div class="bodythree">
				<!-- <div class="bodySpan">制动</div> -->
				<button type="button" id="nine" class="btn2 btn4">6.制动能量回收</button>

			</div>
			<!-- <button type="button" id="seven" class="btn">放电模式</button> -->
			<!-- <div class="btnaround" id="left">
				<img src="../image/right_03.png" alt="">
			</div> -->
		</div>



	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	var sid;
	var socketManager;
	apiready = function () {
		RoomController();

	};

	// 点击a连接跳转，并携带sid
	function RoomController() {
		socketManager = api.require('socketManager');
		socketManager.createSocket({
			type: 'udp',
			udpMode: 'broadcast',
			host: '255.255.255.255',
			port: 5901,
			localPort: 5901,
			// timeout: 1
		}, function (ret, err) {
			if (ret) {
				var state = ret.state;
				var data = ret.data;
				var stateStr = "";
				sid = ret.sid;
				// console.log("sid:" + sid)
				if (101 === state) {
					stateStr = "创建成功";
				} else if (102 === state) {
					stateStr = "连接成功";
				} else if (103 === state) {
					stateStr = "收到消息";
				} else if (201 === state) {
					stateStr = "创建失败";
				} else if (202 === state) {
					stateStr = "连接失败";
				} else if (203 === state) {
					stateStr = "异常断开";
				} else if (204 === state) {
					stateStr = "正常断开";
				} else if (205 === state) {
					stateStr = "发生未知错误";
				}
				var msg = 'sid: ' + sid + '\nstate: ' + stateStr + '\ndata: ' + (data ? data : '');
				console.log(msg);
			} else {
				console.log(JSON.stringify(err));
			}
		});
	}
	//发送命令
	function sendCmd(cmd) {
		var socketManager = api.require('socketManager');
		// console.log("write");
		socketManager.write({
			sid: sid,
			data: cmd
		}, function (ret, err) {
			if (ret.status) {
				// console.log('发送成功');
			} else {
				// console.log('error');
			}
		});
	}

	function toast(hint) {
		api.toast({
			msg: hint,
			duration: 1500,
			location: 'bottom',
		});
	}

	function send(index, value) {
		sendCmd('S201,00,00,00,00,00,00,' + index + ',' + value + 'K');
		setTimeout(function () {
			sendCmd('S201,00,00,00,00,00,00,' + index + ',' + value + 'K');
		}, 100);
		setTimeout(function () {
			sendCmd('S201,00,00,00,00,00,00,' + index + ',' + value + 'K');
		}, 200);
	}


	$("#three").click(function () {
		var flag = $(this).hasClass("active");
		if (flag) {
			$(this).removeClass("active");
			send('01', '00');
		} else {
			$('.bodytop button').removeClass("active");
			$(this).addClass("active");
			send('01', '01');
		}
	});

	$("#four").click(function () {
		var flag = $(this).hasClass("active");
		if (flag) {
			$(this).removeClass("active");
			send('02', '00');
		} else {
			$('.bodytop button').removeClass("active");
			$(this).addClass("active");
			send('02', '01');
		}
	});
	$("#five").click(function () {
		var flag = $(this).hasClass("active");
		if (flag) {
			$(this).removeClass("active");

			send('03', '00');
		} else {
			$('.bodytop button').removeClass("active");
			$(this).addClass("active");
			// toast('已开启');
			send('03', '01');
		}
	});
	$("#six").click(function () { //四驱
		var flag = $(this).hasClass("active");
		if (flag) {
			$(this).removeClass("active");
			send('04', '00');
		} else {
			$('.bodytop button').removeClass("active");
			$(this).addClass("active");
			send('04', '01');
		}
	});

	$("#seven").click(function () {
		var flag = $(this).hasClass("active");
		if (flag) {
			$(this).removeClass("active");
			// toast('已关闭');
			send('05', '00');
		} else {
			$('.bodytop button').removeClass("active");
			$(this).addClass("active");
			// toast('已开启');
			send('05', '01');
		}
	});
	$("#eight").click(function () {
		var flag = $(this).hasClass("active");
		if (flag) {
			$(this).removeClass("active");
			// toast('已关闭');
			send('06', '00');
		} else {
			$('.bodytop button').removeClass("active");
			$(this).addClass("active");
			// toast('已开启');
			send('06', '01');
		}
	});
	$("#nine").click(function () { //制动
		var flag = $(this).hasClass("active");
		if (flag) {
			$(this).removeClass("active");
			// toast('已关闭');
			send('07', '00');
		} else {
			$('.bodytop button').removeClass("active");
			$(this).addClass("active");
			// toast('已开启');
			send('07', '01');
		}
	});

	// $("#ten").click(function () {
	// 	// var flag = $(this).hasClass("active");
	// 	// if (flag) {
	// 	// 	$(this).removeClass("active");
	// 	// 	// toast('已关闭');
	// 	// 	send('006', 'FF');
	// 	// } else {
	// 	$('.bodytop button').removeClass("active");
	// 	$(this).addClass("active");
	// 	// toast('已开启');
	// 	send('009', '0F');
	// 	// }
	// });
</script>

</html>